import React from 'react'
import { changeNav,getUserInfo,modifyUserinfo } from '../../actions'
import { connect } from 'react-redux'
import { List,WhiteSpace,Picker } from 'antd-mobile'
import hhistory from '../../history'

const Item = List.Item
const Brief = Item.Brief

class MyAccount extends React.Component {

	constructor( props ){
		// this.sliderefresh = this.slidechange()
		super( props )
		this.state = { sex:["0"] }
	}

	componentDidMount(){
	    this.props.tochangeNav({title:"我的账号"})
	    this.props.getUserInfo()
	}
	
	componentWillReceiveProps( nextProps ){
		if( nextProps.userInfo.sex ){
			this.state.sex = [nextProps.userInfo.sex]
		}
	}

	render(){
		const { userInfo,modifyUserinfo,getUserInfo } = this.props
		
		return(
			<div className='companyInfo'>
				<List renderHeader={() => ''}>
					<Item arrow="empty"
						extra={ <img 
									src={ userInfo.photo }
									style={{ width:"0.9rem",height:"0.9rem" }}
								/> }
					>
			          头像
			        </Item>
				</List>
				<List renderHeader={() => '账号信息'}>
					<Item arrow="empty"
						extra={ userInfo.mobile }
						onClick={ () => {
							// hhistory.push( '/modifyDetail/mobile' )
						} }
					>
			          手机号码
			        </Item>
			        <Item arrow="horizontal"
						extra={ userInfo.fullName }
						onClick={ () => {
							hhistory.push( '/modifyDetail/name' )
						} }
					>
			          姓名
			        </Item>
					<Picker
				          data={[[
							  {
								  label:"请选择性别",
								  value:null
							  },
							  {
								  label:"男",
								  value:"1"
							  },
							  {
								  label:"女",
								  value:"0"
							  }
							]]}
				          title="选择性别"
				          cascade={false}
				          extra={ this.state.sex.length === 0 ? "没填性别" : this.state.sex[0] === "0" ? "女":"男"  }
				          value={ this.state.sex }
				          onChange={
				          	v => {
								  console.log( v )
								modifyUserinfo("",{ sex:v[0] })
								//yield getUserInfo()
								this.setState( { sex:v } )
							  } 
				          }
				    >
						<Item arrow="down"
							//extra="男"
						>
						性别
						</Item>
			        </Picker>
					<Item arrow="horizontal"
						onClick={ () => {
							hhistory.push( '/modifyDetail/password' )
						} }
					>
			          修改密码
			        </Item>
				</List>
			</div>
		)
	}

	// *slidechange(){

	// }

}

const mapStateToProps = ( state ) => ({
	userInfo:state.userInfo  
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	modifyUserinfo:( username,data ) => dispatch( modifyUserinfo( username,data ) ),
	getUserInfo:() => dispatch( getUserInfo() )
})

export default connect( mapStateToProps,mapDispatchToProps )( MyAccount )